<template>
    <!-- :class为动态绑定class -->
    <span class="support-ico" :class="iconCls"></span>
</template>
<script>
export default {
    // 用于动态生成class名，供span进行绑定使用
    name:'support-ico',
    props:{
        size:{
            // 类型为number类型
            type:Number
        },
        type:{
            type:Number
        }
    },
    computed:{
        iconCls(){
          console.log(this.type)
            // 定义classMap数组
            const classMap = ['decrease','discount','special','invoice','guarantee'];
            // 返回自生成的class名和对应的数组值
            return `icon-${this.size} ${classMap[this.type]}`
        }
    }
}
</script>
// lang="stylus"为css预处理器,scoped为私有属性，该样式仅限用于该组件
<style lang="stylus" scoped>
    // 在导入样式时~为相对路径
    // common表示vue.config.js中resolve函数中返回的路径
    // 此路径为vue-sell-cube/src/common
    // common=>vue-sell-cube/src/common
    @import "common/stylus/mixin"
    // @import "common/stylus/variable"

    .support-ico
      display:inline-block
      background-repeat: no-repeat

    // 自动生成的class的样式
    .icon-1
      width:12px
      height:12px
      background-size:12px 12px
      &.decrease
        bg-image('decrease_1')
      &.discount
        bg-image('discount_1')
      &.guarantee
        bg-image('guarantee_1')
      &.invoice
        bg-image('invoice_1')
      &.special
        bg-image('special_1')

    .icon-2
      width:16px
      height:16px
      background-size:16px 16px
      &.decrease
        bg-image('decrease_2')
      &.discount
        bg-image('discount_2')
      &.guarantee
        bg-image('guarantee_2')
      &.invoice
        bg-image('invoice_2')
      &.special
        bg-image('special_2')

    .icon-3
      width:12px
      height:12px
      background-size:12px 12px
      &.decrease
        bg-image('decrease_3')
      &.discount
        bg-image('discount_3')
      &.guarantee
        bg-image('guarantee_3')
      &.invoice
        bg-image('invoice_3')
      &.special
        bg-image('special_3')

    .icon-4
      width:16px
      height:16px
      background-size:16px 16px
      &.decrease
        bg-image('decrease_4')
      &.discount
        bg-image('discount_4')
      &.guarantee
        bg-image('guarantee_4')
      &.invoice
        bg-image('invoice_4')
      &.special
        bg-image('special_4')
</style>

